<template>
  <div class="main-box">
    <!--登录模态框-->
    <div>
      <a-modal
        ref="modalRef"
        v-model:visible="visible"
        :wrap-style="{ overflow: 'hidden' }"
        @ok="handleOk"
        :footer='null'
      >
      <Login/>
      </a-modal>
    </div>
    <!-- 个人信息模态框 -->
    <div>
      <a-modal
        ref="modalRef"
        v-model:visible="visible10"
        :wrap-style="{ overflow: 'hidden' }"
        :footer='null'
      >
      <PersonInfo/>
      </a-modal>
    </div>
    <nav>
      <div class="nav-center">
        <router-link to="/">首页</router-link>
        <router-link to="/shopcar">购物车</router-link>
        <router-link to="/order" v-show="token!=null">订单中心</router-link>
        <span class="right">
            <span v-show="token==null">
              <a @click="login" class="exit ca">登录 / </a>
              <a @click="resgiter" class="exit ca">注册</a>
            </span>
            <span v-show="token!=null">
              <span class="white person-info" @click="personInfo">欢迎您~{{ token }}</span>
              <a @click="exit" class="exit">退出</a>
            </span>
        </span>  
      </div>
    </nav>
    <el-row justify="center">
      <el-col :span="24">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Login from '@/views/Login.vue'
import PersonInfo from './views/PersonInfo.vue'
import { ref, watch} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import EventBus from './until/EventBus'
export default {
  components:{
    Login,
    PersonInfo
  },
  setup(){
    const router = useRouter()
    const store = useStore()
    //退出
    const exit = ()=>{
      store.dispatch('exit')
      token.value=null
      router.push('/')
    }
    //从vuex获取令牌
    const token = ref()
    token.value = sessionStorage.token
    watch(()=>store.state.userInfo.username,(nval,oval)=>{
      token.value = nval
    })
    
    const visible = ref(false)
    const login = ()=>{
      visible.value = true
    }
    const handleOk = () => {
      visible.value = false;
    };
    //事件总线
    EventBus.on('visibleValue',(data)=>{
      visible.value=data
    })
    
    //注册
    const resgiter = ()=>{
      router.push('/register')
    }

    //个人信息管理
    const visible10 = ref()
    const personInfo = ()=>{
      visible10.value = true
    }
    return{
      exit,token,visible,login,handleOk,resgiter,personInfo,visible10
    }
  }
}
</script>

<style lang="scss">
*{ 
  margin: 0;
  padding: 0;
  color: #303133;
}
.main-box{
  nav{
    width: 100%;
    background-color: #303133;
    .nav-center{
      width: 75%;
      margin: 0 auto;
      position: relative;
      a {
        text-decoration: none;
        padding: 5px 20px;
        color: #F2F3F5;
        &.router-link-exact-active {
          color: #f10d0d;
        }
      }
      .ca{
        padding:0;
      }
    }
  }
  .right{
    position: absolute;
    right: 1%;
  }
  .white{
    color: white;
  }
  .exit{
    cursor: pointer;
  }
  .person-info{
    cursor: pointer;
  }
  
}


</style>
